<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#tt2').datagrid({
				title:'my table',
				width:800,
				height:500,
				fit: true,
				border: false,
				url:'datagrid_data.json',
				sortName: 'code',
				sortOrder: 'desc',
				columns:[[
				          {title:'Base Information',colspan:3},
							{field:'opt',title:'操作',width:100,align:'center', rowspan:2,
								formatter:function(value,rec){
									return '<span style="color:red">Edit Delete</span>';
								}
							}
				          
				],[
							{field:'name',title:'名称',width:120},
							{field:'addr',title:'地址',width:120,rowspan:2,sortable:true},
							{field:'col4',title:'Col41',width:150,rowspan:2}
				]],
				pagination:true
				
			});
			$('#tree1').tree({url:'tree_data.json'});
		});
	</script>
</head>
<body class="easyui-layout">
		<div region="north" title="ntitle" split="true" style="height:100px;padding:10px;">
			<p>n1</p>
			<p>n2</p>
			<p>n3</p>
			<p>n4</p>
			<p>n5</p>
		</div>
		<div region="south" title="南方标题" split="true" style="height:100px;padding:10px;background:#efefef;">
			<div class="easyui-layout" fit="true" style="background:#ccc;">
				<div region="center">sub center</div>
				<div region="east" split="true" style="width:200px;">sub center</div>
			</div>
		</div>
		<div region="east" icon="icon-reload" title="wtitle" split="true" style="width:180px;padding1:15px;">
			<ul id="tree1"></ul>
		</div>
		<div region="west" split="true" title="导航菜单" style="width:280px;padding1:1px;">
			<div class="accordion-container" fit="true" border="false">
				<div title="title1" style="overflow:auto;">
					<p>content1</p>
					<p>content1</p>
					<p>content1</p>
					<p>content1</p>
					<p>content1</p>
					<p>content1</p>
					<p>content1</p>
					<p>content12</p>
				</div>
				<div title="title2" selected="true" style="padding:10px;">
					content2
				</div>
				<div title="title3">
					content3
				</div>
			</div>
		</div>
		<div region="center" title="center title" style="padding1:5px;background:#aaa;">
			<div class="easyui-tabs" fit="true" border="false" style="height:200px;">
				<div title="Tab1" style="padding:20px;display:none;"> 
					<div style="margin-top:20px;">
					<p>该系统是一个由etmvc和easyui for jQuery技术构建的应用示例，如果您对本系统所使用的技术感兴趣，请与我们联系。</p>
					<p>&nbsp;</p>
					<p>设备管理是一款记录设备使用流程的软件，其中有设备信息录入，设备类别设置，区域信息的录制，设备的使用流程，设备使用流程中出错的处理，以及报表查询等功能。</p>
					<p>&nbsp;</p>
					<p>我们对系统进行简化，旨在说明一般功能的开发方法。</p>
					</div>
				</div>
				<div title="Tab2" closable="true" style="padding:20px;display:none;"> This is Tab2 width close button.</div>
				<div title="Tab3" fit="true" icon="icon-reload" closable="true" style="overflow:hidden;padding1:20px;">
					<table id="tt2"></table> 
				</div>
				<div title="Tab4 with iframe" fit="true" closable="true" style="width:100%;height:100%;display:none;">
				</div>
			</div>
		</div>
</body>
</html>